<template>
  <div>
    <app-header></app-header>
    <div class="trainEvaluation" style="margin-top:70px;">
      <div class="main">
        <div class="labbox">
          <h2 class="lab"><span></span>培训评估</h2>
        </div>
        <div style="padding:0 15px;">
          <div class="titname">
            <h2>评估内容</h2><span>选择评估指标</span>
          </div>
          <popup-picker v-for="(item, index) in list" :key="index"
                        :title='item.content'
                        :data="item.options"
                        v-model="item.selectedList"
                        @on-change="onChange(val)"
                        placeholder="选择">
          </popup-picker>

          <!--<popup-picker
                    :title='tit4'
                    :data="evalList"
                    v-model="eval"
                    @on-change="change2"
                    placeholder="选择">
        </popup-picker>-->
        </div>
        <div class="successbox">
          <span class="sub_btn" @click="submitEstimate">提&nbsp;&nbsp;交</span>
        </div>
      </div>

      <div v-transfer-dom class="answer">
        <popup v-model="show">
          <div class="msgDiv">
            <img src="../../assets/images/notice.png">
            <p>请完成全部的评估内容!</p>
            <span class="confirmBtn" @click="show=false">确 &nbsp;&nbsp; 定</span>
          </div>
        </popup>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/header";
  import { XInput, Group, XButton, Cell, Selector, CellBox, XTable, TransferDom, Popup, PopupPicker } from "vux";
  import { getTrainClassEstimatePh, submitEstimate } from '@/api/mineCourse';
  import appHeader from "../../components/header";

export default {
    directives: {
    TransferDom
  },
  components: {
    appHeader,
    XInput,
    XButton,
    Group,
    Cell,
    Selector,
    CellBox,
    XTable,
    Popup,
    PopupPicker
  },
  data() {
    return {
      trainClassId: '',
      courseId: '',
      list: [],
      eval:[],
      show: false,
      oplist:[['满意','一般','不满意']]
    };
  },
    created() {
      this.trainClassId = this.$route.query.id;
      this.courseId = this.$route.query.cuid;
      this.fetchData();
    },
    methods: {
      fetchData() {
        var that = this;
      //  that.listLoading = true;
        getTrainClassEstimatePh({ trainClassId: this.trainClassId}).then(
          response => {
            if (response.length > 0) {
              response.forEach(v => {
                let tem = [];
                tem.push(v.options);
                v.options = tem;
                
              })
            }
            that.list = response;
          }
        );

      },
      onChange(val) {
    

      },
      submitEstimate() {
        let that = this;

        for (var i = 0; i < this.list.length; i++) {
          if (this.list[i].selectedList.length == 0) {
            that.show = true;
            //this.$message({
            //  type: 'warning',
            //  message: '请先选择对' + this.list[i].content + '的评价!',
            //  showClose: true
            //});
            return;
          } else {
            this.list[i].selectedOption = this.list[i].selectedList[0];
          }
        }
        //提交培训评估
        submitEstimate({ trainClassId: this.trainClassId, list: this.list }).then(response => {
          this.$router.push('/course?id=' + that.trainClassId + '&cuid=' + that.courseId);
        });
      }

    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.vux-cell-box:not(:first-child):before{
   left:0!important;
}
.vux-cell-box:last-child:before{
    border-bottom:1px solid #d9d9d9!important;
    border-top:none;
}
.weui-cell_access .weui-cell__ft:after{
    border-style:none;
}
.vux-popup-picker-placeholder{
    background: #2269ff;
    display: inline-block;
    height:23px;
    line-height: 23px;
    padding:5px 25px;
    border-radius: 6px;
    color:#fff!important;
}
.trainEvaluation .weui-cell{
    display: flex;
}
.answer .vux-popup-dialog {
  position: fixed;
  left: calc((100% - 290px)/2);
  top:150px;
  width: 290px;
  height: 170px !important;
  border-radius: 10px;
  background: #ffffff;
  overflow-y: visible ; 
}
.msgDiv{
  text-align: center;
  padding: 13px 25px 20px 25px;
}
.msgDiv img{
  height: 50px;
  width: 50px;
}
.msgDiv p{
  font-size: 15px;
  color: #fe6000;
  font-weight: bold;
  margin-top: 5px;
}

.confirmBtn {
  display: inline-block;
  height: 40px;
  font-size: 15px;
  background-color: #2269ff;
  font-weight: bold;
  line-height: 40px;
  width: 100px;
  color: #ffffff;
  text-align: center;
  border-radius: 10px;
  margin-top: 16px;
}


.trainEvaluation .weui-cells__title {
  height: 40px;
  font-size: 15px;
  color: #2269ff;
  font-weight: bold;
  line-height: 40px;
  width: 100%;
}
.trainEvaluation .weui-cell {
  height: 50px;
  font-size: 15px;
  line-height: 50px;
  margin-right: 15px;
  font-weight: bold;
}
.trainEvaluation .weui-cell_select-after .weui-select {
  color: inherit !important;
  direction: rtl !important;
}
.trainEvaluation weui-input {
  color: #999999;
}
</style>>
<style scoped>
.main {
  padding: 0px 0px 25px 0px;
  text-align: left;
}
.labbox{
    height:45px;
    /* line-height: 45px; */
    padding-left:14px;
    display: flex;
    align-items: center;
}
.lab{
    color:#333;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width:22%;
   font-size:17px;
   font-weight:bold;
}
.lab span{
   display: block;
   width:3px;
   height:18px;
   background: #2269ff;
   border-radius:3px;
   margin-right:1px;
}
.btn1 {
  display: inline-block;
  height: 30px;
  font-size: 14px;
  background-color: #2269ff;
  line-height: 30px;
  width: 70px;
  color: #ffffff;
  text-align: center;
  border-radius: 6px;
}
.successbox{
    display: flex;
    width:100%;
    justify-content: center;
    margin-top:60px;
    
}
.sub_btn{
    display: block;
    width:230px;
    height:45px;
    border-radius:5px;
    background: #2269ff;
    color:#fff;
    font-size:15px;
    line-height: 45px;
    font-weight:bold;
    text-align: center
    
}

.vux-table {
  line-height: normal;
  border-collapse: collapse;
}
.vux-table th {
  border-top: 0;
  font-weight: bold;
  font-size: 15px;
  text-align: left;
}
.vux-table th:last-child {
  text-align: center;
}
.vux-table:after {
  border-top: none;
}
.vux-table td {
  font-size: 14px;
  text-align: left;
}
.vux-table td,
.vux-table th {
  height: 50px;
  padding: 0 auto;
}
.vux-table tbody tr td:first-child{
    width:70%
}
.vux-table tbody tr td:last-child{
    width:30%;
    text-align: center;
}
thead {
  border: 0;
}
.titname{
    padding-left:30px;
    height:30px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    margin-top:10px;
}
.titname span{
    font-size:16px;
    font-weight:bold;
}
</style>
